import React, { useState, useRef, useEffect } from "react";
import { Graph, Node } from "@antv/x6";
import { Button, Input, Form, Select, Space, Typography, Layout } from "antd";
import {
  SaveOutlined,
  DeleteOutlined,
  PlusOutlined,
  UndoOutlined,
  RedoOutlined,
} from "@ant-design/icons";
import { initGraph } from "./util";
import { DynamicNode } from "hqhui";

const { Title, Text } = Typography;
const { Sider, Content, Header } = Layout;
const { Option } = Select;

const FlowEditor: React.FC = () => {
  const graphContainer = useRef<HTMLDivElement>(null);
  const graph = useRef<Graph | null>(null);
  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
  const [nodeForm] = Form.useForm();
  const [isDragging, setIsDragging] = useState(false);
// 清空画布的函数
const clearCanvas = (graph: Graph) => {
  if (graph) {
    // 清除所有节点和连线
    graph.clearCells();
    // 清空选择状态
    graph.cleanSelection();
    // 提示用户
    console.log('画布已清空');
  }
};

  // 初始化画布
  useEffect(() => {
    if (graphContainer.current) {
      graph.current = initGraph(graphContainer.current);
      graph.current.on('node:click',({node}:any)=>{
        console.log(node.data)
        setSelectedNode(node)
      })
      console.log(graph.current);
    }
  }, []);

  return (
    <Layout style={{ height: "100vh" }}>
      <Header
        style={{
          background: "#fff",
          padding: "0 20px",
          borderBottom: "1px solid #e8e8e8",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            height: "100%",
          }}
        >
          <Title level={4} style={{ margin: 0 }}>
            流程编排系统
          </Title>
          <Space>
            <Button icon={<UndoOutlined />}  onClick={()=>graph.current.canUndo()?graph.current.undo():false}>撤销</Button>
            <Button icon={<RedoOutlined />}  onClick={()=>graph.current.canRedo()?graph.current.redo():false}>恢复</Button>
            <Button icon={<SaveOutlined />}>保存</Button>
            <Button icon={<DeleteOutlined />} danger onClick={()=>clearCanvas(graph.current)}>
              清空
            </Button>
          </Space>
        </div>
      </Header>

      <Layout>
        {/* 左侧工具栏 */}
        <Sider width={180} style={{ borderRight: "1px solid #e8e8e8" }}>
          <div id="stencil" className="w-full h-full"></div>
        </Sider>

        {/* 中间画布区域 */}
        <Content style={{ flex: 1, overflow: "hidden" }}>
          <div
            ref={graphContainer}
            style={{
              width: "100%",
              height: "100%",
            }}
          />
        </Content>

        {/* 右侧属性面板 */}
        {
          (selectedNode && selectedNode.data?.type) && (
            <Sider
              width={300}
              style={{ background: "#fff", borderLeft: "1px solid #e8e8e8" }}
            >
              <DynamicNode nodeType={selectedNode.data?.type} />
            </Sider>
          )
        }
      </Layout>
    </Layout>
  );
};

export default FlowEditor;
